<template>
  <div>
    <el-row justify="center">
      <h1>库存一览</h1>
    </el-row>
    <el-row>
      <el-col :span="22">
        <!--       表格 -->
        <el-table :data="cutObj.records" style="width: 100%;margin-bottom: 20px " border stripe>
          <el-table-column prop="name" label="商品名"/>
          <el-table-column prop="type" label="类别"/>
          <el-table-column prop="brand" label="品牌"/>
          <el-table-column prop="num" width="100px" label="库存数量"/>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" @click="findById(scope.row.id)">查询</el-button>
              <el-button type="primary" @click="findByIdu(scope.row.id)">修改信息</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--     分页   -->
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            background
            layout="prev, pager, next, jumper"
            :total="this.cutObj.total"
            @current-change="findByItem"
        />

        <!--        动态查询的-->
        <fieldset style="margin-top: 20px ;width: 800px">
          <legend>查询采购信息</legend>
          <div style="display: flex;justify-content: space-around">
            <el-form-item label="商品名称" style="width: 250px">
              <el-input clearable v-model="paramObj.name"/>
            </el-form-item>
            <el-form-item clearable label="起始数量" style="width: 250px">
              <el-input clearable v-model="paramObj.startNum"/>
            </el-form-item>
          </div>

          <div style="display: flex;justify-content: space-around">
            <el-form-item label="未定销售价" style="width: 250px">
              <el-select v-model="paramObj.salePrice">
                <el-option
                    v-for="item in change"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="结束数量" style="width: 250px">

              <el-input clearable v-model="paramObj.endNum"/>
            </el-form-item>
          </div>
          <div style="display: flex;justify-content: space-around">
            <el-form-item label="类别" style="width: 250px">
              <el-select v-model="paramObj.type">
                <el-option
                    v-for="item in changeType"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                />
              </el-select>
            </el-form-item>

            <el-button @click="findByItem(1)" type="primary">查询</el-button>
          </div>


        </fieldset>

        <!--    个人信息弹出框    -->
        <el-dialog
            v-model="showInfo"
            title="商品详情信息"
        >
          <el-row>
            <el-col :span="10">
              <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="商品编号">
                  {{ productObj.id }}
                </el-form-item>
              </el-form>
              <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="商品名称">
                  {{ productObj.name }}
                </el-form-item>
              </el-form>
              <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="商品品牌">
                  {{ productObj.brand }}
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="14">
              <img :src="'/project/productImg/'+productObj.imgPath" style="width: 200px;height: 200px">
            </el-col>
          </el-row>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label=" 类别 ">
              {{ productObj.type }}
            </el-form-item>
            <el-form-item label="库存数量 ">
              {{ productObj.num }}
            </el-form-item>
          </el-form>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label=" 最新采购价 ">
              {{ productObj.buyPrice }}
            </el-form-item>
            <el-form-item label="建议销售价 ">
              {{ productObj.salePrice }}
            </el-form-item>
          </el-form>


          <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="showInfo = false">
          确定
        </el-button>
      </span>
          </template>
        </el-dialog>
        <!--   修改弹出框    -->
        <el-dialog
            v-model="showUpdate"
            title="商品详情信息"
        >
          <el-row>
            <el-col :span="10">
              <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="商品编号">
                  {{ updateObj.id }}
                </el-form-item>
              </el-form>
              <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="商品名称">
                  {{ updateObj.name }}
                </el-form-item>
              </el-form>
              <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="商品品牌">
                  {{ updateObj.brand }}
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="14">
              <img :src="'/project/productImg/'+updateObj .imgPath" style="width: 200px;height: 200px">
            </el-col>
          </el-row>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label=" 类别 ">
              {{ updateObj.type }}
            </el-form-item>
            <el-form-item label="库存数量 ">
              {{ updateObj.num }}
            </el-form-item>
          </el-form>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label=" 最新采购价 ">
              {{ updateObj.buyPrice }}
            </el-form-item>
            <el-form-item label="建议销售价 ">
              <el-input v-model="updateObj.salePrice"></el-input>
            </el-form-item>
          </el-form>
          <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="update">
          修改
        </el-button>
      </span>
          </template>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import axios from "axios"

export default {
  data() {
    return {
      cutObj: {},
      currentPage: '',
      pageSize: 5,
      paramObj: {},
      showInfo: false,
      productObj: {},
      formInline: "",
      showUpdate: false,
      form: "",
      updateObj: {},
      change: [{id: 1, name: '不限'}, {id: 2, name: '未定销售价'}],
      changeType: [{id: 1, name: '电脑产品'}, {id: 2, name: '安防产品'}, {id: 3, name: '打印扫描设备'}, {
        id: 4,
        name: '办公耗材'
      }],
    }
  }, methods: {
    findByItem(pageNO) {
      this.currentPage = pageNO;
      this.paramObj.pageNO = pageNO;
      axios.get('/project/product/findByItem', {params: this.paramObj}).then(resp => {
        this.cutObj = resp.data;
        console.log(this.cutObj)

      })

    },
    findById(id) {
      axios.get('/project/product/findById', {
        params: {
          id: id
        }
      }).then(resp => {
        this.showInfo = true;
        this.productObj = resp.data;
      })

    }, findByIdu(id) {
      axios.get('/project/product/findById', {
        params: {
          id: id
        }
      }).then(resp => {
        this.showUpdate = true;
        this.updateObj = resp.data;
      })
    }, update() {
      axios.get('/project/product/updateSalePrice', {
        params: {
          id: this.updateObj.id,
          newSalePrice: this.updateObj.salePrice

        }
      }).then(resp => {
            if (resp.data == "ok") {
              this.showUpdate = false;
              this.findByItem(1);
            }
          }
      )

    }
  }, created() {
    this.findByItem(1);
  }
}
</script>

<style scoped>

</style>